<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

import tabdetailLogo1 from '../../assets/pc/tabdetail-logo1.png';
import tabdetailLogo2 from '../../assets/pc/tabdetail-logo2.png';
import tabdetailLogo3 from '../../assets/pc/tabdetail-logo3.png';

import bg1 from '../../assets/pc/introduceProjectSchool-1.png';
import bg2 from '../../assets/pc/introduceProjectSchool-2.png';
import bg3 from '../../assets/pc/introduceProjectSchool-3.png';

import bgZ1 from '../../assets/pc/introduceProjectSchool-z-1.png';
import bgZ2 from '../../assets/pc/introduceProjectSchool-z-2.png';
import bgZ3 from '../../assets/pc/introduceProjectSchool-z-3.png';

const imgs = reactive([
    {bg1,bg2,bg3},{bgZ1,bgZ2,bgZ3}
])

const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  introduce: {
    type: Object,
    default: {}
  },
  index: {
    type: Number,
    default: 0
  }, 
  typeBg: {
    type: Number, //1蓝色 2紫色
    default: 2
  }
});
const goToDetail = (id) => {
  console.log('121221', props.type, props.introduce);
  router.push({ path: '/schooldDetailPc', query: { id, type: props.type } });
};


</script>

<template>
<!-- v-for="item in introduce" :key="item" -->
<div >
  <div class="project-box">
    <!-- :style="{ 'background-image': `url(${imgs[tabIndex].banner})` }" -->
     <!-- :style="{ background: url(typeBg == 1 ? bg1 : bgZ1)  }" -->
    <!-- v-for="(item,index) in introduce" :key="item" -->
    <div  class="left" @click="goToDetail(introduce.length > 0 ? introduce[0].id : '')" :style="typeBg == 1 ? `background-image:url(${bg1})` : `background-image:url(${bgZ1})`" >
      <div class="logo-wrap">
        <img :src="introduce.length > 0 ? introduce[0].coverimage : ''"/>
      </div>
      <div class="title-box">
        <span>{{introduce.length > 0 ? introduce[0].titile : ''}}</span><img :src="tabdetailLogo1" />
      </div>
      <div class="subtitle">{{introduce.length > 0 ? introduce[0].subtitle : ''}}</div>
    </div>
    <div class="right" >
      <div class="right-item" @click="goToDetail(introduce.length > 0 ? introduce[1].id : '')"  :style="typeBg == 1 ? `background-image:url(${bg2})` : `background-image:url(${bgZ2})`" >
        <div class="logo-wrap">
          <img :src="introduce.length > 0 ? introduce[1].coverimage : ''"/>
        </div>
        <div class="text-box">
          <div class="title-box"><span>{{introduce.length > 0 ? introduce[1].titile : ''}}</span><img :src="tabdetailLogo2"/></div>
          <div class="subtitle">
            {{introduce.length > 0 ? introduce[1].subtitle : ''}}
          </div>
        </div>
      </div>
      <div class="right-item" @click="goToDetail(introduce.length > 0 ? introduce[2].id : '')"  :style="typeBg == 1 ? `background-image:url(${bg3})` : `background-image:url(${bgZ3})`" >
        <div class="logo-wrap">
          <img :src="introduce.length > 0 ? introduce[2].coverimage : ''"/>
        </div>
        <div class="text-box">
          <div class="title-box"><span>{{introduce.length > 0 ? introduce[2].titile : ''}}</span><img :src="tabdetailLogo3"/></div>
          <div class="subtitle">
             {{introduce.length > 0 ? introduce[2].subtitle : ''}}
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="introduceProject"  @click="goToDetail(props.introduce.id)">
    <div class="introduceProject-top">
        <img :src=introduce.coverimage />
        <span class="introduceProject-top-tip"><div class="btn">精选推荐</div></span>
    </div>
    <div class="introduceProject-title">{{props.introduce.titile}}</div>
     <div class="introduceProject-subtitle">{{props.introduce.subtitle}}</div>
      <div class="introduceProject-wrap">
        <div  class="look-more">
            查看详情
        </div>
       
      </div>
</div> -->
</div>
</template>

<style scoped lang="less">
.project-box {
  display: flex;
  .left {
    width: 454Px;
    height: 723Px;
    background: linear-gradient(316deg, #cde9ff 0%, #eef8ff 100%);
    border-radius: 20Px;
    margin-right: 54Px;
    // background-image: url('../../assets/pc/introduceProjectSchool-1.png');
    background-size: 100% 100%;
    // introduceProjectSchool-1.png
    cursor: pointer;
    .logo-wrap {
      width: 410Px;
      height: 410Px;
      border-radius: 27Px;
      margin: 21Px 12Px 45Px 12Px;
      padding: 10Px;
      img {
        width: 100%;
        height: 100%;
      }
    }
      .title-box {
        font-size: 36Px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 50Px;
        letter-spacing: 3Px;
        display: flex;
        align-items: center;
        margin: 21Px;
        span {
            width: 80%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        img {
          width: 41Px;
          height: 35Px;
          margin-left: 22Px;
        }
      }
      .subtitle {
        margin: 21Px;
        font-size: 24Px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 33Px;
        margin-bottom: 53Px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 4; //显示几行;
    }
  }
  .right {
    .right-item {
      width: 634Px;
      height: 279Px;
      border-radius: 8Px;
      display: flex;
      align-items: center;
      padding: 30Px;
      margin-bottom: 45Px;
      background-image: url('../../assets/pc/introduceProjectSchool-2.png');
      background-size: 100% 100%;
      .logo-wrap {
        flex:0 0 280Px;
        height: 280Px;
        background: #97cffe;
        opacity: 0.48;
        filter: blur(2Px);
        margin-right: 16Px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text-box {
        .title-box {
          font-size: 36Px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          line-height: 50Px;
          letter-spacing: 3Px;
          display: flex;
          align-items: center;
          margin-bottom: 22Px;
            span {
                width: 250Px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
          img {
            width: 41Px;
            height: 35Px;
            margin-left: 22Px;
          }
        }
        .subtitle {
            font-size: 24Px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 33Px;
            width: 350Px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            line-clamp: 2;
            -webkit-line-clamp: 4; //显示几行;
        }
      }
    }
    .right-item:nth-child(2){
        background-image: url('../../assets/pc/introduceProjectSchool-3.png');
        background-size: 100% 100%;
    }
  }
}
// <div class="project-box">
//     <div class="left">
//         <div class="logo-wrap">
//             <img/>
//         </div>
//         <div class="title-box">浙江理工大学备份 3<img/></div>
//         <div class="subtitle">简介简介简介简介简介简介简简介简介简介简备份 3</div>
//     </div>
//     <div class="right">
//         <div class="right-item">
//             <div class="logo-wrap">
//                 <img/>
//             </div>
//             <div class="text-box">
//                 <div class="title-box">浙江理工大学备份 3<img/></div>
//                 <div class="subtitle">简介简介简介简介简介简介简简介简介简介简备份 3</div>
//             </div>
//         </div>
//         <div class="right-item">
//             <div class="logo-wrap">
//                 <img/>
//             </div>
//             <div class="text-box">
//                 <div class="title-box">浙江理工大学备份 3<img/></div>
//                 <div class="subtitle">简介简介简介简介简介简介简简介简介简介简备份 3</div>
//             </div>
//         </div>
//     </div>
// </div>

// .introduceProject {
//     margin-bottom: 20Px;
//     width: 361Px;
//     box-shadow: 0Px 2Px 4Px 0Px rgb(240 240 240 / 50%), 0Px 0Px 4Px 2Px rgb(225 225 225 / 36%);
//     border-radius: 0Px 0Px 37Px 37Px;

//     border-radius: 14Px;
//     padding-bottom: 20Px;
//     cursor: pointer;
//     .introduceProject-top{
//         position: relative;
//         width: 100%;
//         height: 256Px;
//         margin-bottom: 21Px;
//         border-radius: 13Px 13Px 0 0;
//         background: #fff;
//         display: flex;
//         align-items: center;
//         justify-content: center;
//         img {
//             width: 256Px;
//             height: 100%;
//             border-radius:14Px 14Px 0Px 0Px;
//         }
//         .introduceProject-top-tip {
//             position: absolute;
//             left: 0;
//             bottom: 0;
//             width: 361Px;
//             height: 62Px;
//             background: rgba(255,255,255,0.46);
//             border-radius: 33Px 33Px 0Px 0Px;
//             border: 1Px solid #FFFFFF;
//             backdrop-filter: blur(6.656000000000001Px);
//             display: flex;
//             align-items: center;
//             justify-content: center;
//             .btn {
//                 width: 116Px;
//                 height: 40Px;
//                 background-image: url('../../assets/pc/homepage-btn.png');
//                 background-size: 100%;
//                 font-size: 15Px;
//                 font-family: PingFangSC-Regular, PingFang SC;
//                 font-weight: 400;
//                 color: #ffffff;
//                 line-height: 21Px;
//                 line-height: 40Px;
//                 padding-left: 15Px;
//                 }
//         }
//     }
//     .introduceProject-title {
//         font-size: 20Px;
//         font-family: PingFangSC-Medium, PingFang SC;
//         font-weight: 500;
//         color: #000000;
//         line-height: 34Px;
//         margin-bottom: 2Px;
//         padding: 0 6Px;
//         overflow: hidden;
//         text-overflow:ellipsis;
//         white-space: nowrap;
//         padding: 0 20Px;
//     }
//     .introduceProject-subtitle {
//         font-size: 14Px;
//         font-family: PingFangSC-Regular, PingFang SC;
//         font-weight: 400;
//         color: #111111;
//         line-height: 22Px;
//         margin-bottom: 12Px;
//         padding: 0 20Px;
//         overflow: hidden;
//         text-overflow: ellipsis;
//         display: -webkit-box;
//         -webkit-box-orient: vertical;
//         -webkit-line-clamp: 2;
//     }
//     .introduceProject-wrap {
//         padding: 0 20Px;
//         display: flex;
//         justify-content: flex-end;
//         align-items: center;
//         .look-more {
//             width: 85Px;
//             height: 27Px;
//             border-radius: 16Px;
//             border: 1Px solid #C5B6FD;
//             font-size: 13Px;
//             font-family: PingFangSC-Regular, PingFang SC;
//             font-weight: 400;
//             color: #034171;
//             line-height: 27Px;
//             text-align: center;
//             font-weight: bold;
//         }
//         .introduceProject-wrap-left {
//             font-size: 14Px;
//             font-family: PingFangSC-Medium, PingFang SC;
//             font-weight: 500;
//             color: #999999;
//             line-height: 20Px;
//             display: flex;
//             align-items: center;
//             span {
//                 font-size: 21Px;
//                 font-family: PingFangSC-Regular, PingFang SC;
//                 font-weight: 400;
//                 color: #999999;
//                 line-height: 29Px;
//                 // max-width: 50Px;
//                 display: inline-block;
//                 overflow: hidden;
//                 text-overflow:ellipsis;
//                 white-space: nowrap;
//             }
//         }
//         .introduceProject-wrap-right {
//             color: #FF544D;
//             font-size: 16Px;
//             span {
//                 font-size: 21Px;
//                 font-family: PingFangSC-Medium, PingFang SC;
//                 font-weight: 500;
//                 color: #FF544D;
//                 line-height: 29Px;
//             }
//         }
//     }
// }
</style>
